/*
 * GradientButton : BaseButton 渐变色按钮（无图标），继承自按钮基类
 */
import QtQuick 2.15
import QtGraphicalEffects 1.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Item {
    /* property 定义开始 */
    // 全局
    property var mobileDevice: ["android", "ios"] // 不带鼠标的设备
    property var pc_otherDevice: ["windows", "linux"] // 带鼠标的设备
    // 目前使用上边方法判断是否带鼠标（不准确）
    property bool hoverEnable: (mobileDevice.indexOf(Qt.platform.os) === -1) ? true : false

    // 按钮
    property int gradBtnWidth: 120
    property int gradBtnHeight: 40
    property int gradBtnRadius: 8
    property bool isSquareBtn: false
    property string startColor: "#8C97ED"
    property string endColor: "#0018D1"
    property bool isEnable: true

    // 文字
    property string gradFontFamily: "Alibaba PuHuiTi"
    property int gradFontPixelSize: 16
    property string gradFontColor: "#FFF"
    property string gradText: "--Grad Default--"

    // 禁用状态属性
    property string disabledStartColor: "#F5F5F5"
    property string disabledEndColor: "#F5F5F5"
    property string disabledFontColor: "#BFBFBF"

    // 信号
    signal entered();
    signal exited();
    signal pressed();
    signal released();
    /* property 定义结束 */

    id: root
    width: gradBtnWidth
    height: isSquareBtn ? gradBtnWidth : gradBtnHeight
    Layout.preferredWidth: gradBtnWidth
    Layout.preferredHeight: isSquareBtn ? gradBtnWidth : gradBtnHeight

    BaseButton {
        isEnable: root.isEnable
        btnWidth: gradBtnWidth
        btnHeight: gradBtnHeight
        isGradient: true
        btnFontColor: gradFontColor
        btnFontFamily: gradFontFamily
        btnFontPixelSize: gradFontPixelSize
        btnText: gradText
        btnIsLabelFillWidth: true
        btnIsLabelFillHeight: true
        btnBorderWidth: 0
        btnIconWidth: 0
        btnIconHeight: 0
        disabledBtnTextColor: disabledFontColor

        layer.enabled: true
        layer.effect: OpacityMask {
            maskSource: Rectangle {
                width: gradBtnWidth
                height: gradBtnHeight
                radius: gradBtnRadius
            }
        }

        Rectangle {
            id: btnBackground
            state: "default"
            width: parent.width
            height: parent.height / 2 * 3
            y: 0
            z: -1

            LinearGradient {
                anchors.fill: parent
                start: Qt.point(0, 0)
                end: Qt.point(0, height)
                gradient: Gradient {
                    GradientStop {position: 0.0; color: isEnable ? startColor : disabledStartColor}
                    GradientStop {position: 0.5; color: isEnable ? endColor : disabledEndColor}
                    GradientStop {position: 1.0; color: isEnable ? startColor : disabledStartColor}
                }
            }

            states: [
                State {
                    name: "default"
                    PropertyChanges {
                        target: btnBackground
                        y: 0
                    }
                },
                State {
                    name: "hover"
                    PropertyChanges {
                        target: btnBackground
                        y: -btnBackground.height / 3
                    }
                }
            ]
            transitions: [
                Transition {
                    from: "default"
                    to: "hover"
                    NumberAnimation {
                        targets: btnBackground
                        properties: "y"
                        duration: 40
                    }
                },
                Transition {
                    from: "hover"
                    to: "default"
                    NumberAnimation {
                        target: btnBackground
                        property: "y"
                        duration: 40
                    }
                }
            ]
        }

        MouseArea {
            enabled: isEnable
            anchors.fill: parent
            hoverEnabled: hoverEnable
            cursorShape: isEnable ? Qt.PointingHandCursor : Qt.ArrowCursor // 指针变为小手图标
            onEntered: {
                // console.log("悬停")
                btnBackground.state = "hover"
                root.entered()
            }
            onExited: {
                // console.log("离开")
                btnBackground.state = "default"
                root.exited()
            }
            onPressed: function(mouse){
                // console.log("按下")
                btnBackground.state = "hover"
                root.pressed()
            }
            onReleased: {
                // console.log("释放")
                btnBackground.state = "default"
                root.released()
            }
        }
    }

}
